<template>
  <div>
    <div v-show="type=='add'">
      <FormPanel
        ref="formpanel"
        :list="formList"
        formType="add"
        labelWidth="100"
        :isSubmitBtn="false"
        @formChange="formchangeFun"
      />
      <FilterTable
        ref="table"
        :columns="columns"
        :params="fetchParams"
        :datakey="'records'"
        :onColumnsChange="columns => this.columns = columns"
        :dataSource="tablelist"
        :onRowSelectChange="selectChange"
      >
        <template slot="controls" slot-scope="props">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="visible = true">添加</el-button>
        </template>
        <template slot="moreActions">
          <span @click="delRowsHandle()">批量删除</span>
        </template>
      </FilterTable>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeDrawer(1)">取 消</el-button>
        <el-button @click="closeDrawer(2)" type="primary">保 存</el-button>
      </div>
      <BaseDialog
        :visible.sync="visible"
        title="角色模板选择"
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
      >
        <roleTemplate @change="changeHandle" @close="roleTemplateClose" />
      </BaseDialog>
    </div>
    <div v-show="type=='emit'">
      <FormPanel
        :list="formList2"
        formType="show"
        labelWidth="100"
        :isSubmitBtn="false"
        ref="formpanel2"
      />
      <FilterTable
        ref="table2"
        :columns="columns2"
        data-key
        :onColumnsChange="columns2 => this.columns2 = columns2"
        :dataSource="emitlist"
        :onRowSelectChange="selectChangeFun"
      >
        <template slot="controls" slot-scope="props">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="emitAddfun()">添加</el-button>
        </template>
        <template slot="moreActions">
          <span @click="delRowsHandle1()">批量删除</span>
        </template>
      </FilterTable>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="closeDrawer(1)">取 消</el-button>
        <el-button @click="closeDrawer(2)" type="primary">保 存</el-button>
      </div>
      <BaseDialog
        :visible.sync="visible1"
        title="角色模板选择"
        destroyOnClose
        :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}"
      >
        <roleTemplate1 @change="changeHandle1" @close="roleTemplateClose1" :getdata="setpropsdata" />
      </BaseDialog>
    </div>
    <div v-show="type=='show'">
      <FormPanel
        :list="formList1"
        formType="show"
        labelWidth="100"
        :isSubmitBtn="false"
        ref="formpanel1"
      />
      <FilterTable
        ref="table1"
        :columns="columns1"
        :isPagination="false"
        :isSelectColumn="false"
        :dataSource="detailList"
        :uidkey="'_uid'"
        :onColumnsChange="columns1 => this.columns1 = columns1"
      ></FilterTable>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 9,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'right'
        }"
      >
        <el-button @click="showback()">返 回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getRolelist, setRolelist, getRoledetail, getRoleLists, setEmitRole } from '@/api/common/auth/positionAuth/index';
import roleTemplate from './roleTemplate.vue';
import roleTemplate1 from './roleTemplate1.vue';
export default {
  name: 'zjDistributionRole',
  data() {
    this.BaseTable = null;
    this.BaseTable1 = null;
    this.formpanel = null;
    this.adddata = null;
    this.BaseTable2 = null;
    return {
      propstype: this.type,
      visible: false,
      visible1: false,
      tablelist: [], //调用接口
      fetchParams: {
        limit: 5,
        pageNum: 1,
        roleCode: '',
        roleName: ''
      }, //调用数据
      adddata: {
        dataSource: '10451001',
        dataType: '10461001',
        positionCode: '',
        positionName: '',
        departGmsList: [],
        roleGmsSelectList: []
      },
      showdata: {
        id: this.getdata.id,
        code: this.getdata.code,
        codename: this.getdata.codename
      },
      columns: this.createTablelist(),
      selectedRows: [],
      selectedRows1: [],
      formList: this.createTop(),
      formList1: this.createShowTop(),
      formList2: this.createEmitTop(),
      columns1: this.createShowtable(),
      columns2: this.createemittable(),
      detailList: [],
      emitlist: [],
      setpropsdata: {
        id: this.getdata.id,
        code: this.getdata.code,
        codename: this.getdata.codename,
        roleGmsSelectList: []
      }
    };
  },
  components: {
    roleTemplate,
    roleTemplate1
  },
  props: ['type', 'getdata'],
  created() {},
  mounted() {
    console.log(this.type, this.$refs);

    if (this.type == 'show') {
      this.BaseTable1 = this.$refs.table1.$refs.pageTable;
      this.getRoledetails();
    } else if (this.type == 'add') {
      this.BaseTable = this.$refs.table.$refs.pageTable;
      this.getRoleListsFun();
    } else if (this.type == 'emit') {
      this.BaseTable2 = this.$refs.table2.$refs.pageTable;
      this.getRoleListsFun();
    }
  },
  methods: {
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '角色代码',
          dataIndex: 'roleCode',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleCode}</span>;
          }
        },
        {
          title: '角色名称',
          dataIndex: 'roleName',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleName}</span>;
          }
        }
      ];
    },
    createShowtable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '角色代码',
          dataIndex: 'roleCode',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleCode}</span>;
          }
        },
        {
          title: '角色名称',
          dataIndex: 'roleName',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleName}</span>;
          }
        }
      ];
    },
    createemittable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '角色代码',
          dataIndex: 'roleCode',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleCode}</span>;
          }
        },
        {
          title: '角色名称',
          dataIndex: 'roleName',
          sorter: false,
          filter: false,
          render: props => {
            return <span>{props.row.roleName}</span>;
          }
        }
      ];
    },
    createEmitTop() {
      return [
        {
          type: 'INPUT',
          label: '职位代码',
          readonly: true,
          fieldName: 'positionCode',
          placeholder: '职位代码',
          initialValue: this.getdata.code
        },
        {
          type: 'INPUT',
          label: '职位名称',
          readonly: true,
          fieldName: 'positionName',
          placeholder: '职位名称',
          initialValue: this.getdata.codename
        }
      ];
    },
    createTop() {
      return [
        {
          type: 'INPUT',
          label: '职位代码',
          fieldName: 'positionCode',
          placeholder: '职位代码',
          initialValue: '',
          focus: () => {
            // this.topFilterList[0].initialValue = '刘德华';
            // this.topFilterList = [...this.topFilterList];
          },
          rules: [{ required: true, message: '请输入职位代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '职位名称',
          fieldName: 'positionName',
          placeholder: '职位名称',
          initialValue: '',
          focus: () => {
            // this.topFilterList[0].initialValue = '刘德华';
            // this.topFilterList = [...this.topFilterList];
          },
          rules: [{ required: true, message: '请输入职位名称', trigger: 'blur' }]
        }
      ];
    },
    createShowTop() {
      return [
        {
          type: 'INPUT',
          label: '职位代码',
          readonly: true,
          fieldName: 'positionCode',
          placeholder: '职位代码',
          initialValue: this.getdata.code
        },
        {
          type: 'INPUT',
          label: '职位名称',
          readonly: true,
          fieldName: 'positionName',
          placeholder: '职位名称',
          initialValue: this.getdata.codename
        }
      ];
    },
    // 获取详情
    getRoledetails() {
      console.log('ajax');
      let that = this;
      getRoledetail({}, this.getdata.id)
        .then(function(res) {
          console.log(res, that);
          if (res.resultCode == 200) {
            that.detailList = res.data || [];
          }
        })
        .catch(function(res) {});
    },
    // 获取角色列表
    getRoleListsFun() {
      console.log('ajax');
      let that = this;
      getRoleLists(this.getdata)
        .then(function(res) {
          console.log(res, that);
          if (res.resultCode == 200) {
            if (that.type == 'emit') {
              that.emitlist = res.data || [];
            } else if ((that.type = 'add')) {
              that.tablelist = res.data || [];
            }
          }
        })
        .catch(function(res) {});
    },
    async closeDrawer(type) {
      if (type == 1) {
        this.$emit('close', false);
      } else {
        if (this.type == 'add') {
          this.$refs.formpanel.SUBMIT_FORM();
          console.log(this.adddata, 'shuju');
          if (this.adddata != null) {
            if (this.type == 'add') {
              this.adddata.roleGmsSelectList = [...this.tablelist];
              await setRolelist(this.adddata);
              this.$emit('close', false);
            }
          }
        } else if (this.type == 'emit') {
          this.setpropsdata.roleGmsSelectList = [...this.emitlist];
          console.log(this.setpropsdata, '编辑传参');
          await setEmitRole({ ...this.setpropsdata });
          this.$emit('close', false);
        }
      }
    },
    formchangeFun(val) {
      this.adddata = val;
      console.log(val, '通过校验');
    },
    roleTemplateClose(val) {
      console.log(val);
      this.visible = false;
    },
    changeHandle(data) {
      console.log(data);
      this.tablelist = this.filterArr([...this.tablelist, ...data], 'roleId');
      console.log(this.tablelist);
      this.visible = false;
    },
    // 编辑组件回调
    roleTemplateClose1(val) {
      this.visible1 = val;
    },
    changeHandle1(data) {
      console.log(data);
      let arr = data.list;
      this.emitlist = this.filterArr([...this.emitlist, ...arr], 'roleId');
      console.log(this.emitlist);
      this.visible1 = false;
    },
    delFun(data) {
      console.log(data, this.tablelist.findIndex(item => item.roleId == data.roleId));
      this.tablelist.splice(this.tablelist.findIndex(item => item.roleId == data.roleId), 1);
    },
    delRowsHandle() {
      this.BaseTable.EXECUTE_DELETE();
    },
    delRowsHandle1() {
      this.BaseTable2.EXECUTE_DELETE();
    },
    // 选中
    selectChange(rows) {
      this.selectedRows = rows;
    },
    selectChangeFun(rows) {
      this.selectedRows1 = rows;
    },
    // 编辑添加
    emitAddfun() {
      this.visible1 = true;
    },
    // 查看详情返回按钮
    showback() {
      this.$emit('close', false);
    },
    //数组去重方法
    filterArr(arr, attribute) {
      var new_arr = [];
      var json_arr = [];
      for (var i = 0; i < arr.length; i++) {
        if (new_arr.indexOf(arr[i][attribute]) == -1) {
          //  -1代表没有找到
          new_arr.push(arr[i][attribute]); //如果没有找到就把这个name放到arr里面，以便下次循环时用
          json_arr.push(arr[i]);
        } else {
        }
      }
      return json_arr;
    }
  }
};
</script>

